<template>
  <div id="app" class="distribute-yarn">
    <!-- 头部导航 -->
    <van-nav-bar left-arrow @click-left="comeBack" left-text="返回">
      <template #title>
        <span @click="preDayFn">前一天</span>
        <span @click="showDate = true" style="margin: 0 10px;">{{ dateTime }}</span>
        <span @click="nextDayFn">后一天</span>
      </template>
      <template #right>
        <span @click="openWin('distribute-yarn-detail')"><van-icon name="plus" size="20" /></span>
      </template>
    </van-nav-bar>

    <!-- 筛选 -->
    <van-search v-model="queryParam.yarnNo" placeholder="请输入搜索关键词" @search="loadYarnOutDataFn(1)" />

    <div style="display:flex; justify-content: space-between;color: #96b327;font-size: 1.2rem;font-weight: bolder;padding:0.5vh 3vw;">
      <div>
        <span>总包数:{{ summary.packNum }}</span>
      </div>
      <div>
        <span>总重量:{{ summary.weight }}</span>
      </div>
    </div>

    <!-- 滚动 -->
    <better-scroll class="body-scroll" :data="packData" :totalPage="queryParam.totalPage" :pulldown="true" :pullup="true" @pulldown="loadYarnOutDataFn(1)" @pullup="loadYarnOutDataFn">
      <van-cell-group v-show="packData.length > 0">
        <van-swipe-cell v-for="yarn in packData">
          <template #default>
            <van-cell :title="yarn.yarnNo">
              <template #label>
                <div style="display: flex;justify-content: space-between;">
                  <span style="font-size: 1rem;color: #2774b3;font-weight: bolder">{{ "机台: " + yarn.machineNo }}</span>
                  <span>{{ "批次: " + yarn.yarnLotNo }}</span>
                  <span style="font-size: 1rem; font-weight: bold;color: #afb601;">{{ "重量: " + yarn.weight + "kg" }}</span>
                </div>
                <div style="margin-top: 1vh;">
                  <span style="font-size: 0.8rem;">{{ yarn.createAt }}</span>
                </div>
              </template>
            </van-cell>
          </template>
          <template #right>
            <van-button square type="danger" text="删除" @click="delCraftYarnFn(yarn)"/>
          </template>
        </van-swipe-cell>
      </van-cell-group>
      <van-empty image="https://img01.yzcdn.cn/vant/custom-empty-image.png" v-show="packData.length === 0" description="暂无数据"></van-empty>
    </better-scroll>

    <!-- 日期筛选 -->
    <van-calendar v-model="showDate" :min-date="minDate" :max-date="new Date()" :round="false" @confirm="selectDataFn"/>
  </div>
</template>

<script>
import dayjs from "dayjs";
import {comeBack, getFloat, openWin} from "@/utils";
import {SPLIT_BLANK} from "@/api/enum";
import {delCraftYarn, loadCraftYarn} from "@/views/weaving/weaving";

export default {
  name: "distributeYarn",
  data() {
    return {
      /* 数据日期 */
      dateTime: dayjs().format("YYYY-MM-DD"),
      minDate: new Date(dayjs().subtract(1, 'year')),
      showDate: false,

      /* 查询条件 */
      queryParam: {
        yarnNo: SPLIT_BLANK,
        beginAt: dayjs().format("YYYY-MM-DD 00:00:00"),
        endAt: dayjs().add(1, "day").format("YYYY-MM-DD 00:00:00"),
        pageNum: 1,
        pageSize: 8,
        totalPage: 0,
      },

      /* 出库数据 */
      packData: [],

      /* 合计 */
      summary: {
        packNum: 0,
        weight: 0,
      }
    }
  },
  mounted() {
    const that = this;
    if (process.env.NODE_ENV === "production") {
      this.$nextTick(() => {
        that.initFn();
      });
    } else {
      window.apiready = function () {
        that.initFn();
      };
    }
  },
  methods: {
    getFloat,
    openWin,
    comeBack,

    /* 初始化 */
    initFn() {
      const that = this;
      that.loadYarnOutDataFn(1);

      window.api.addEventListener({
        name:'viewdisappear'
      }, function() {
        window.api.closeWin();
      });
    },

    /* 前一天 */
    preDayFn() {
      const that = this;
      that.dateTime = dayjs(that.dateTime).subtract(1, "day").format("YYYY-MM-DD");
      that.transQuery();
      that.loadYarnOutDataFn(1);
    },
    /* 后一天 */
    nextDayFn() {
      const that = this;
      if (that.dateTime === dayjs().format("YYYY-MM-DD")) {
        this.$toast.fail("明天还没到");
        return false;
      }
      that.dateTime = dayjs(that.dateTime).add(1, "day").format("YYYY-MM-DD");
      that.transQuery();
      that.loadYarnOutDataFn(1);
    },
    /* 选择日期 */
    selectDataFn(val) {
      const that = this;
      that.dateTime = dayjs(val).format("YYYY-MM-DD");
      that.transQuery();
      that.showDate = false;
    },
    transQuery() {
      const that = this;
      that.queryParam.beginAt = dayjs(that.dateTime).format("YYYY-MM-DD 00:00:00");
      that.queryParam.endAt = dayjs(that.dateTime).add(1, "day").format("YYYY-MM-DD 00:00:00");
    },

    /* 加载出库数据 */
    loadYarnOutDataFn(pageNum) {
      const that = this;
      if(pageNum == 1) {
        that.packData.splice(0, that.packData.length);
        that.queryParam.pageNum = 1;
        that.queryParam.totalPage = 0;
      } else {
        that.queryParam.pageNum++;
        if(that.queryParam.pageNum > that.queryParam.totalPage) {
          return;
        }
      }
      loadCraftYarn(that.queryParam, res => {
        if(res.code == 0 || res.code) {
          that.$toast.fail(res.msg);
          return;
        }
        that.queryParam.totalPage = res.totalPage;
        res.list.forEach(row => {
          if(row.machineType == 1) {
            row.machineNo += "整经机";
          } else if(row.machineType == 2) {
            row.machineNo += "织布机";
          }
          that.packData.push(row);
        });
        that.calSummaryFn();
      });
    },

    /* 删除机台发纱 */
    delCraftYarnFn(row) {
      const that = this;
      that.$dialog.confirm({
        title: "请确认操作",
        message: "将删除机台盘头发纱记录"
      }).then(() => {
        delCraftYarn({
          craftYarnId: row.id
        }, res => {
          if(res.code == 0 || res.code) {
            that.$toast.fail(res.msg);
            return;
          }
          that.$toast.success("操作成功");
          that.packData.splice(that.packData.findIndex(r => r == row), 1);
          that.calSummaryFn();
        });
      }).catch(() => {
      });
    },

    /* 合计 */
    calSummaryFn() {
      const that = this;
      that.summary.packNum = that.packData.length;
      that.summary.weight = that.packData.map(p => Number(p.weight)).reduce((a, b) => a + b, 0).toFixed(1);
    },
  }
}
</script>

<style lang="scss" scoped>
.distribute-yarn {
  ::v-deep .van-nav-bar {
    .van-nav-bar__title {
      display: flex;
      height: 100%;
      align-items: center;
      span {
        display: flex;
        height: 100%;
        align-items: center;
        justify-content: center;
        flex: 1;
        font-size: 14px;
        &:first-child {
          color: #1989fa;
        }
        &:last-child {
          color: #ee0a24;
        }
      }
    }
    .van-nav-bar__right {
      span {
        display: flex;
        height: 100%;
        align-items: center;
      }
    }
  }

  ::v-deep .van-search {
    z-index: 1;
  }

  .body-scroll {
    height: 82vh;
    overflow: hidden;
  }
}
</style>